<template>

  <el-main>

    <h1> File 文件 </h1>
    <table class="table">
      <thead class="thead-dark" >
      <tr>
        <th scope="col">#</th>
        <th scope="col">名称</th>
        <th scope="col">类型</th>
        <th scope="col">介绍</th>
        <th scope="col">操作</th>
      </tr>
      </thead>
      <tbody v-for="(file, index) in fileList">
      <tr>
        <th scope="row">{{ index + 1 }}</th>
        <td>{{ file.fileTitle }}</td>
        <td>{{ file.fileSystem }}</td>
        <td>{{ file.fileInfo }}</td>
        <td>
          <el-button size="mini" style="margin-left: 0"  icon="el-icon-download" type="primary" @click="download(file.fileId)">下载文件</el-button>
        </td>
      </tr>
      </tbody>
    </table>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
          layout="prev, pager, next"
          :page-size="8"
          :current-page="pageParam.current"
          :total="pageParam.total"
          @next-click="nextPage"
          @prev-click="prevPage"
          @current-change="currentChange"
      >
      </el-pagination>
    </div>

  </el-main>

</template>

<script>
import {fileDownload, filesGet} from "@/api/file";
import axios from "axios";

export default {
  name: "index",
  data() {
    return {
      fileList: [],
      // 分页参数
      pageParam: {
        total: 0,
        size: 15,
        current: 1,
        pages: 1
      }

    }
  },
  created(){
    this.getFileList(this.pageParam.current);
  },
  methods:{
    nextPage(){
      this.getBlogList(++this.current)
    },
    prevPage(){
      this.getBlogList(--this.current)
    },
    currentChange(val){
      /*修改当前页面为val 来自前端点击数字的值*/
      this.current = val;
      this.getBlogList(this.current);
    },
    getFileList(page){
      filesGet(page).then(res => {
        if (res.code === 0) {
          let response = res.data;
          this.fileList = response.records;
          this.pageParam.current = response.current;
          this.pageParam.pages = response.pages;
        }else {
          Message({
            message: '获取失败' ,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    download(fileId){
      window.open("/api/file/download?fileId="+fileId,'_self ')
      // console.log(fileId)
      // fileDownload(fileId).then(
      //     res=>{
      //       Message({
      //         message: '获取成功' ,
      //         type: 'success',
      //         duration: 5 * 1000
      //       })
      //     }
      // )
    }
  }
}
</script>

<style scoped>

</style>
